<template>
    <el-dialog :title="title" :visible="true" :lock-scroll="true" top="0px" @close="handleClose" center :fullscreen="this.$isMobile"
        :custom-class="customClass">
        <div id="xg-player__container"></div>
    </el-dialog>
</template>


<script>
import Player from 'xgplayer'
import { Events } from 'xgplayer'

import HlsPlugin from 'xgplayer-hls'
export default {
    props: ['visible'],

    data() {
        return {
            player: null,
            currentTime: '',
            title: null,
            playedRanges: [],
            playerInterval: null,
            timeout: 10 * 1000
        }
    },

    computed: {

        customClass() {
            return this.$isMobile ? 'video-container__dialog is-mobile' : 'video-container__dialog'
        },
    },
    



    beforeDestroy() {
        this.removePlayerListener()
    },


    methods: {

        init(item) {
            this.$nextTick(() => {
                this.createPlayer(item)
            })
        },
        createPlayer(item) {
            this.title = item.title
            const isSupport = document.createElement('video').canPlayType('application/vnd.apple.mpegurl')
            const params = {
                id: "xg-player__container",
                url: item.streamingVideoLink,
                playsinline: true,
                poster: item.coverImage,
                width: "100%",
                height: "100%",
                plugins: [],
                autoplay: true,
                playbackRate: false,
                cssFullscreen: false,
                dynamicBg: {
                    disable: true
                },
                hls: {
                    preloadTime: 10
                }

            }
            if (isSupport) {
            } else if (HlsPlugin.isSupported()) {
                params.plugins = [HlsPlugin]
            }
            this.player = new Player(params);

            this.player.on(Events.TIME_UPDATE, () => {
                this.updateCurrentTime();
            });

            this.player.on(Events.PLAY, () => {
                this.addPlayerListener();
            });

            this.player.on(Events.PAUSE, () => {
                this.removePlayerListener();
            });





            return this.player;
        },

        updateCurrentTime() {
            this.currentTime = this.player && this.player.currentTime;

            const played = this.player.played;
            this.playedRanges = [];
            for (let i = 0; i < played.length; i++) {
                this.playedRanges.push({
                    start: Math.round(played.start(i)),
                    end: Math.round(played.end(i))
                });
            }



        },

        handleClose() {
            this.$emit("close")
            this.$emit('update:visible', false)
        },

        addPlayerListener() {
            clearInterval(this.playerInterval)
            this.playerInterval = setInterval(() => {
                this.playedRanges.forEach((item) => {
                    this.$emit("report", [item.start, item.end])
                })
            }, this.timeout);

        },

        removePlayerListener() {
            clearInterval(this.playerInterval)
        }


    }
}

</script>

<style scoped lang="less">
::v-deep .el-dialog {
    &.video-container__dialog {
        width: 80%;
        height: 80%;
        margin: auto;
        display: flex;
        flex-direction: column;
        transform: translateY(calc(50vh - 50%));

        &.is-mobile {
            width: 100%;

        }

    }

    .el-dialog__header {
        padding: 8px;
        height: 40px;

        .el-dialog__headerbtn {
            transform: scale(1.5);
            margin-top: -8px;
        }

    }

    .el-dialog__body {
        height: calc(100% - 40px);
        width: calc(100% - (40 * 16 / 9)px);
        overflow: hidden;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
}



#xg-player__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

}
</style>